<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.star-wp{
			background-image: url(../img/star.png);
			height: 21px;
			width: 109px;
		}
		.star-5{
			background-position: 0 -1px;			
		}
		.star-4{
			background-position: 0 -25px;			
		}
		.star-3{
			background-position: 0 -50px;			
		}
		.star-2{
			background-position: 0 -75px;			
		}
		.star-1{
			background-position: 0 -100px;			
		}
		.star-0{
			background-position: 0 -124px;			
		}
		.star-wp span {
			float: left;
			width: 21px;
			height: 21px;
		}
	</style>
</head>
<body>
	<h1>各星级展示</h1>
	<hr />
	<h3>5</h3>
	<div class="star-wp star-5"></div>
	<h3>4</h3>
	<div class="star-wp star-4"></div>
	<h3>3</h3>
	<div class="star-wp star-3"></div>
	<h3>2</h3>
	<div class="star-wp star-2"></div>
	<h3>1</h3>
	<div class="star-wp star-1"></div>
	<h3>0</h3>
	<div class="star-wp star-0"></div>
	<hr />
	<h3>打的分数是：<span class="sum">0</span></h3>
	<div id="starWp" class="star-wp star-0">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
	
	<script src="../lib/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	<script>
		!function(window,document,$,undefined){
			var $star = $('#starWp'),
				$stars = $star.find('span');
			$stars.on('mouseover',function(){
				var $this = $(this),
					index = $this.index();
				$star.attr('class', 'star-wp star-' + ++index); 
				$('.sum').text(index);
			});
		}(window,document,jQuery);		
	</script>
</body>
</html>